import React from 'react'
import { Outlet,NavLink } from 'react-router-dom'  // 类似于vue的 router- 加载二级路由试图
import { Button,Tabbar  } from 'react-vant';
import { FriendsO, HomeO, Search, SettingO } from '@react-vant/icons';
function Home() {
  return (
    <div className='wrap'>
      <header className='header'>
      
        Home
        </header>
      <main className='main'>
         <Outlet />
         {/* <Button type="primary">主要按钮</Button> */}
      </main>
      <footer className='footer'>
      <Tabbar>
            <Tabbar.Item icon={<HomeO />}>
                <NavLink to='/home/index'>首页</NavLink>
            </Tabbar.Item>
        
            <Tabbar.Item icon={<Search />}>
                <NavLink to='/home/car'>购物车</NavLink>
            </Tabbar.Item>
        
            <Tabbar.Item icon={<FriendsO />}>
                <NavLink to='/home/class'>分类</NavLink>
            </Tabbar.Item>
            
            <Tabbar.Item icon={<SettingO />}>
                <NavLink to='/home/my'>我的</NavLink>
            </Tabbar.Item>
    </Tabbar>
      </footer>
     
    </div>
  )
}

export default Home